import { useState } from 'react';
import Train from './rightPages/Train';
import SetAmount from './rightPages/SetAmount';
import AiDirect from './rightPages/AiDirect';
import { BodyState } from './utils/Detect';

interface RightProps {
  page: number;
  setPage: (value: number) => void;
}

const Right = (props: RightProps) => {
  const { page, setPage } = props;
  const [bodyState, setBodyState] = useState<BodyState>(new BodyState());

  let route: JSX.Element;

  switch (page) {
    case 0: {
      route = <Train setBodyState={setBodyState} />;
      break;
    }
    case 1: {
      route = <SetAmount />;
      break;
    }
    case 2: {
      route = <AiDirect setBodyState={setBodyState} />;
      break;
    }
    default: {
      route = <div>void</div>;
      break;
    }
  }

  return <div id="right">{route}</div>;
};

export default Right;
